<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绿地养护</title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style>
			html, body {
				background-color: #F5F6F6;
			}
			.empty {
				margin-left: auto;
				margin-right: auto;
				width: 98%;
			}
			.doufu {
				margin-top: 5px;
			}
			.doufu li {
				width: 50%;
				float: left;
			}
			.doufu li div {
				margin: 5px;
				background-color: #fff;
				padding: 10px;
			}
			.ci {
				text-align: left;
				height: 16px;
				line-height: 16px;
			}
			.ci span {
				padding-left: 16px;
				float: right;
			}
			.shu {
				text-align: center;
				font-size: 22px;
				line-height: 30px;
				height: 30px;
				color: #1abc9c
			}
			.hui {
				color: #555555;
				font-size: 13px;
			}
			.bimg {
				background-image: url(../image/tanhao.png);
				background-size: 16px;
				background-position: right;
				background-repeat: no-repeat
			}
			.shangcheng {
				background-image: url(../image/shangsheng.png);
				background-size: 16px;
				background-position: left -2px;
				background-repeat: no-repeat;
				width: 24px;
			}
			.xiajiang {
				background-image: url(../image/xiajiang.png);
				background-size: 16px;
				background-position: 0%;
				background-repeat: no-repeat;
				width: 30px;
			}
			.tongjiimg {
				margin-left: auto;
				margin-right: auto;
				width: 95%;
			}
			.tongjiimg img {
				margin-top: 6px;
			}
			.wode {
				background-color: #1abc9c;
				padding: 8px 0px 8px 10px;
				background-image: url(../image/setting_cell_arrow@2x.png);
				background-size: 10px;
				background-position: right 15px center;
				background-repeat: no-repeat;
			}
			.wode p:nth-child(1) {
				font-size: 18px;
			}
			.wode p {
				line-height: 25px;
				color: #fff
			}
		</style>
	</head>
	<body>
				<div class="empty">
			<ul class="doufu">
				<li>
					<div>
						<p class="bimg">
							电压相对值
						</p>
						<p class="shu">
							20 V
						</p>
					</div>
				</li>
				<li>
					<div>
						<p class="bimg">
							电流相对值
						</p>
						<p class="shu">
							15 A
						</p>
						
					</div>
				</li>
				<li>
					<div>
						<p class="bimg">
							本月用电
						</p>
						<p class="shu">
							15 kwh
						</p>
						
					</div>
				</li>
				<li>
					<div>
						<p class="bimg">
							功率
						</p>
						<p class="shu">
							<span style="">15</span> <span>kw</span>
						</p>
						
					</div>
				</li>
				<!--<li>
					<div>
						<p class="bimg">
							本月告警
						</p>
						<p class="shu">
							15
						</p>
						<p class="ci hui">		
							上月告警：10 <span class="shangcheng">2%</span>
						</p>
					</div>
				</li>
				<li>
					<div>
						<p class="bimg">
							本月日报
						</p>
						<p class="shu">
							15
						</p>
						<p class="ci hui">
							&nbsp;
						</p>
					</div>
				</li>-->
			</ul>
		</div>
				
				<div class="content">				
								
										
						<div id="container" style="height: 200px;width:100%;float:left;"></div>												
						<div id="container1" style="height: 200px;width:100%;float:left;"></div>
						<div id="container2" style="height: 200px;width:100%;float:left;"></div>												
						<div id="container3" style="height: 200px;width:100%;float:left;"></div>				
						<!--<tr>						
						<td style="width: 100%"><div id="container2" style="height: 200px"></div></td>
						</tr>-->
					
				</div>
				<div class="content">				
								
										
						<div id="container4" style="height: 300px;width:100%;float:left;"></div>											
						<div id="container5" style="height: 300px;width:100%;float:left;"></div> 
						<div id="container6" style="height: 300px;width:100%;float:left;"></div>											
						<div id="container7" style="height: 300px;width:100%;float:left;"></div> 				
					
				</div>
	</body><script src="../../script/webuploader.min.js"></script>
	<script src="../../script/diyUpload.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/echarts.min.js"></script>
	<script src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script type="text/javascript">
		apiready = function() {
			id = api.pageParam.id;//绿地id
			var departid=$api.getStorage('selectpor').id
			var departname=$api.getStorage('selectpor');
			var userid=	$api.getStorage('userSession').data.id;//用户id
			var qiyeid=	$api.getStorage('userSession').data.enterprise.id;//企业id
			//图片
		
			function lvdiimage(){
						var appimage = new Vue({
							el : '#imgBox1',
							data : {
								todos:[
							
							]	
							},
							created : function() {
								$.ajax({
									type : "post",
									//async : false, //同步执行
									url : serverIP+"appcodegreenland/lvdiimage.json",
									data : {
									id :id
									},
									dataType : "json", //返回数据形式为json
									success : function(result) {
										
											
											for (var i = 0; i < result.data.length; i++) {											
											appimage.todos.push(result.data[i].image)								
										}
									
									}
								});
							}
						})
					
					}
			
			
				
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title : {
						text : '年用电量',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : ["室外用电量","室内用电量"]
					},
					series : [{
						name : '',
						type : 'pie',
						radius : '55%',
						center : ['50%', '60%'],
						data :[{"name":"室外用电量","value":"16"},{"name":"室内用电量","value":"130"}],
						itemStyle : {
							emphasis : {
								shadowBlur : 5,
								shadowOffsetX : 0,
								shadowColor : 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				;
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
	
	
				
				var dom = document.getElementById("container1");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title : {
						text : '十天用电量',
						subtext : '',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : ["室外用电量","室内用电量"]
					},
					series : [{
						name : '',
						type : 'pie',
						radius : '55%',
						center : ['50%', '60%'],
						data : [{"name":"室外用电量","value":"13"},{"name":"室内用电量","value":"26"}],
						itemStyle : {
							emphasis : {
								shadowBlur : 10,
								shadowOffsetX : 0,
								shadowColor : 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				;
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
		
		
		var dom = document.getElementById("container2");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title : {
						text : '月用电量',
						subtext : '',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : ["室外用电量","室内用电量"]
					},
					series : [{
						name : '',
						type : 'pie',
						radius : '55%',
						center : ['50%', '60%'],
						data :[{"name":"室外用电量","value":"13"},{"name":"室内用电量","value":"26"}],
						itemStyle : {
							emphasis : {
								shadowBlur : 10,
								shadowOffsetX : 0,
								shadowColor : 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				;
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
				
				
				var dom = document.getElementById("container3");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title : {
						text : '日用电量',
						subtext : '',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : "{a} <br/>{b} : {c} ({d}%)"
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data :  ["室外用电量","室内用电量"]
					},
					series : [{
						name : '',
						type : 'pie',
						radius : '55%',
						center : ['50%', '60%'],
						data : [{"name":"室外用电量","value":"13"},{"name":"室内用电量","value":"26"}],
						itemStyle : {
							emphasis : {
								shadowBlur : 10,
								shadowOffsetX : 0,
								shadowColor : 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				;
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
		
		//折线图
		var dom = document.getElementById("container4");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        title : {
            text: '新风',

            x:'center'
        },
        yAxis: {
            type: 'value'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} "
        },
        series: [{
            name: '姓名',
            data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    
    //折线图
    var dom1= document.getElementById("container5");
    var myChart1 = echarts.init(dom1);
    var app1 = {};
    option1 = null;
    option1 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        title : {
            text: '其他',

            x:'center'
        },
        yAxis: {
            type: 'value'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} "
        },
        series: [{
            name: '姓名',
            data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    ;
    if (option1 && typeof option1 === "object") {
        myChart1.setOption(option1, true);
    }
    
     //折线图
    var dom1= document.getElementById("container6");
    var myChart1 = echarts.init(dom1);
    var app1 = {};
    option1 = null;
    option1 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        title : {
            text: '插座东',

            x:'center'
        },
        yAxis: {
            type: 'value'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} "
        },
        series: [{
            name: '数量',
            data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    ;
    if (option1 && typeof option1 === "object") {
        myChart1.setOption(option1, true);
    }
    
    
     //折线图
    var dom1= document.getElementById("container7");
    var myChart1 = echarts.init(dom1);
    var app1 = {};
    option1 = null;
    option1 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        title : {
            text: '毛细',

            x:'center'
        },
        yAxis: {
            type: 'value'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} "
        },
        series: [{
            name: '数量',
            data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    ;
    if (option1 && typeof option1 === "object") {
        myChart1.setOption(option1, true);
    }
    
    
//		$.ajax({
//			type : "post",
//			//async : false, //同步执行
//			url : serverIP+"patrol/findgetallss2.json",
//			data : {
//			qiyeid:qiyeid
//			},
//			dataType : "json", //返回数据形式为json
//			success : function(result) {
//				
//				var dom = document.getElementById("container2");
//				var myChart = echarts.init(dom);
//				var app = {};
//				option = null;
//				option = {
//					title : {
//						text : '乔木灌木对比',
//						subtext : '',
//						x : 'center'
//					},
//					tooltip : {
//						trigger : 'item',
//						formatter : "{a} <br/>{b} : {c} ({d}%)"
//					},
//					legend : {
//						orient : 'vertical',
//						left : 'left',
//						data : ["落叶乔木","落叶灌木","常绿乔木","常绿灌木"]
//					},
//					series : [{
//						name : '',
//						type : 'pie',
//						radius : '55%',
//						center : ['50%', '60%'],
//						data : result,
//						itemStyle : {
//							emphasis : {
//								shadowBlur : 10,
//								shadowOffsetX : 0,
//								shadowColor : 'rgba(0, 0, 0, 0.5)'
//							}
//						}
//					}]
//				};
//				;
//				if (option && typeof option === "object") {
//					myChart.setOption(option, true);
//				}
//			}
//		});
				
					
			//植物详情信息
			
					$.ajax({
						type : "post",
						//async : false, //同步执行
						url : serverIP+"patrol/plant1Detailed.json",
						data : {
						id :id
						},
						dataType : "json", //返回数据形式为json
						success : function(result) {	
										
									
								$("#huname").html(result.data.huname);
							    $("#species").html(result.data.species);
								
								//$("#pointList").html(result.datas.pointList);
								//$("#image").attr("src",serverImage+result.datas.image);	
								find(result.data.hundredplant);
									
						}
					});	
					
				function find(id1){
					
					$.ajax({
						type : "post",
						//async : false, //同步执行
						url : serverIP+"hundredPlant/plantDetailed.json",
						data : {
						id :id1
						},
						dataType : "json", //返回数据形式为json
						success : function(result) {	
																
								$("#alias").html(result.datas.alias);
								$("#genus").html(result.datas.genus);
								$("#family").html(result.datas.family);
								$("#division").html(result.datas.division);
								$("#kingdom").html(result.datas.kingdom);
								$("#species1").html(result.datas.pointList);
								//$("#pointList").html(result.datas.pointList);
								$("#image").attr("src",serverImage+result.datas.image);	
									
						}
					});					
				
			}
			
			//统计分析列表
			var app1 = new Vue({
				el : '#qqq111',
				data : {
					todos:[
				
				]	
				},
				created : function() {
					$.ajax({
						type : "post",
						//async : false, //同步执行
						url : serverIP+"appcodegreenland/tongji.json",
						data : {
						id :id
						},
						dataType : "json", //返回数据形式为json
						success : function(result) {
								
								for (var i = 0; i < result.datas.length; i++) {
								//alert(JSON.stringify(result));
								//var url="http://192.168.43.43:8090/kaizouba/"+result.data[i].picture;
								//alert(url)
								app1.todos.push(result.datas[i])								
							}
								
						
						}
					});
				}
			})			
			
									
		};
		
		function lvdizhiwu(id){
				api.openWin({
							name : 'xxxxx',
							url : 'lvdizhiwu_window.html',
							rect : {
								x : 0,
								y : 75,
								w : 'auto',
								h : 'auto'
							},
							pageParam : {
								id : id								
							}, //传递参数
							bounces : true,
							delay : 200
						});
			
			}
		
		//选择正常或者异常
		flag = "btn1";
		function btn1() {
			document.getElementById("btn2").style.color = "#FFFFFF";
			document.getElementById("btn1").style.color = "#FFFFFF";
		}

		function btn2() {
			document.getElementById("btn1").style.color = "#FFFFFF";
			document.getElementById("btn2").style.color = "#FFFFFF";
		}

		function btn(num) {
			if (num == 1) {
				document.getElementById(flag).style.color = "#FFFFFF";
				document.getElementById(flag).style.backgroundColor = "#FFFFFF";
				document.getElementById("btn1").style.color = "#FFFFFF";
				document.getElementById("btn1").style.backgroundColor = "#FF8C00";
				flag = "btn1";
			}
			if (num == 2) {
				document.getElementById(flag).style.color = "#FFFFFF";
				document.getElementById(flag).style.backgroundColor = "#FFFFFF";
				document.getElementById("btn2").style.color = "#FFFFFF";
				document.getElementById("btn2").style.backgroundColor = "#FF8C00";
				flag = "btn2";
			}
		}
	</script>
	
	
	
</html>
